<template>
    <div class="pintuan">
      <backzj :mssg='aaa'/>
      <div class="zhena"></div>
      <!-- 拼团中头 -->
      <div class="ksdi" v-show="ptuan.xianshi">
        <div>
          <img :src="SMDataURL+'/images/zfcg.png'" class="nomml"></img>
        </div>
        <div class="ctcgs">参团成功</div>
        <div class="yqsa">
          <p class="deyq">邀好友拼团</p>
          <img :src="SMDataURL+'/images/myw-fx.png'" class="fximg"></img>
        </div>
      </div>
      <div :class="{'cular-z0':ptuan.xianshi,'cular-z01':!ptuan.xianshi}">
        <img :src="SMDataURL+'/images/product-endstatus.png'" class="larz-img2"></img>
        <img :src="SMDataURL+'/images/ptuanjxz.png'" class="larz-img1"></img>
      </div>
      <div :class="{'larz-z0':ptuan.xianshi,'larz-z':!ptuan.xianshi}">
        <div class="rzz-z">
          <div>1人团</div>
          <div class="kdj">
            <span class="dfk">1</span>人拼中商品,<span class="dfk">1</span>人得<span class="dfk">￥999</span>
          </div>
          <p>第:191期</p>
        </div>
        <div class="rzz-o">
          <img :src="SMDataURL+'/images/wdyass9.jpg'"></img>
          <div class="zzo-z">
            <div class="puctName">束带结发好看死了加大加肥还是点</div>
            <div class="dutiao">
              <div class="bena">
                <div class="bena-in" style="width: 20%;"></div>
              </div>还差2人
            </div>
            <div class="ductprice">
              <div>拼团价￥<span>235</span></div>
              <div>￥999</div>
            </div>
            <div class="dfa">
              <div class="fdklg">红包<span class="fdjg">999</span>元</div>
              <div class="fuigh">查看订单</div>
            </div>
          </div>
        </div>
        <div class="dfa asdas">
          <div class="fkj" v-show="0">拼团已结束</div>
          <div class="fkj">
            <div>仅剩：111小时111分钟</div>
            <div class="aksdoo">
              <div class="alksdgs">
                <div>到期续团</div>
                <img :src="SMDataURL+'/images/kddwen0.png'" class="asfsd"></img>
              </div>
              <mt-switch v-model="value"></mt-switch>
            </div>
          </div>
          <div class="fkj" v-show="0">

          </div>
        </div>
      </div>
      <!-- 拼团中头 -->
      <!-- 1、团长拼团订单详情 -->
      <div class="xmain" v-if="0">
        <div class="dfkjgd">
          <div class="kja">1人拼中红包899</div>
        </div>
        <div class="dsjk">
          <div class="yqsa asdsga">
            <p class="deyq">邀好友拼团</p>
            <img :src="SMDataURL+'/images/xqfzgai-3.png'" class="fximg"></img>
          </div>
        </div>
      </div>
      <div class="cular-o" v-if="0">
        <div class="bianhao">
          <div class="fdjkg">我的参团编号：</div>
          <div class="dsfj">1saf</div>
        </div>
        <div class="ularo-o" :style="maxhei!=0?'height:'+maxhei+'px':''">
          <div class="mobust2" :style="'top:' + item.top +'px','left'+item.left+'px','background-image:url'(item.headerImg)">
          </div>
          <div class="prize" :hidden='orderGWStatus!=2' :style=" 'top:' + item.top+60 + 'px' , 'left:' + item.left+5 + 'px' , item.win!=1?'color:color:#999;':'' ">{{item.win==1?"商品":"未拼中"}}</div>
        </div>
        <div class="clear"></div>
        <div class="crae2" style="margin-top:14px;width:160px;" @click="tofirst">返回首页</div>
      </div>
      <!-- 1、团长拼团订单详情 -->
      <!-- 2、非团长拼团订单详情 -->
      <div class="cular-o">
        <div class="cmslTitle1">参团成员</div>
        <div class="ularo-o">
          <div class="mobust" style="background-image: url('https://e.amjhome.com//baojiayou/tts_upload/6624/20210705/s_tts_6624_20210705113508_745.jpg');"></div>
          <div class="liopu">3252</div>
          <div class="wenhao">?</div>
          <div class="clear"></div>
        </div>
        <div class="clear"></div>
        <div class="crae2" @click="tofirst">返回首页</div>
      </div>
      <!-- 2、非团长拼团订单详情 -->
      <!-- 拼团已结束 -->
      <div class="xmain">
        <div class="dskjf">恭喜您拼中喜欢的商品：322个</div>
        <div class="askjdf">祝您顺风顺水好运气！</div>
        <div class="dskjf">您没有拼中商品，发个红包安慰一下！</div>
        <div class="kdfjg">共获得<span class="dsjks">￥999</span>红包补贴</div>
        <div class="dfkjg">(3463元立即到账，剩余546元约15天后到账)</div>
        <div class="dfkjgd">
          <div class="kja">2人拼中红包￥999</div>
          <div>共支付￥99，其中￥99拼团金已退</div>
        </div>
        <div class="dsjk">
          <div class="kdfjga" @click="toxq">再拼一次</div>
          <div class="yqsa asdsga">
            <span class="deyq">邀好友拼团</span>
            <img :src="SMDataURL+'/images/myw-fx.png'" class="fximg"></img>
          </div>
        </div>
        <div class="kdfjg">核销码将于：<span class="dsjks">23252</span>到期</div>
        <div class="kdsjg">
          <img :src="SMDataURL+'/images/myw-fx.png'" ></img>
        </div>
        <div class="fdka">取货码</div>
        <div class="dhxk">
          <div class="asdap">待核销</div>
          <div class="sdgfvv">
            <span>当日建议</span>
            <span class="asdavv">（欢迎今日到店核销取货）</span>
          </div>
        </div>
        <div class="kdfjg">很遗憾！核销码已于：<span class="dsjks">363</span>过期</div>
        <div class="dkga">已失效</div>
        <div>核销时间：3463</div>
          <div>已核销</div>
          <div class="kdsjg sdfsd">
            <img :src="SMDataURL+'/images/myw-fx.png'" ></img>
          </div>
      </div>
      <!-- 拼团已结束 -->
    </div>
</template>

<script>
import backzj from '../components/backzj.vue';
export default {
  components: { backzj },
  data() {
    return {
      DataURL: "https://e.amjhome.com/baojiayou/tts_upload",
      SMDataURL: "https://bjy.51yunkeyi.com/baojiayou/tts_upload",
      aaa:'拼团详情',
      ptuan:''
    };
  },
  methods: {
    tofirst(){
      this.$router.push('/')
    },
    toxq(){
      this.$router.push('/spxiangq')
    }
  },
  mounted() {
    var that = this;
    if (that.$route.query) {
      that.ptuan = that.$route.query;
    }
  },
};
</script>

<style scoped>
.pintuan{
  padding: 0 5px;
  box-sizing: border-box;
  background:#FDAC6F;
  border: 1px solid #FDAC6F;
}
.zhena{
  width: 100%;
  height: 40px;
}
.cular-z{
  height: 215px;
  width: 100%;
  position: relative;
}
.cular-z01{
  height: 215px;
  width: 100%;
  position: relative;
  top: 8px;
}
.cular-z0{
  height: 210px;
  width: 100%;
  position: relative;
}
.larz-img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.larz-img1{
  position: absolute;
  top: -6px;
  left: 0;
  width: 100%;
  height: 100%;
}
.larz-img2{
  position: absolute;
  top: 8%;
  left: 50%;
  width: 198px;
  height: 24px;
  transform: translateX(-60%);
}
.larz-z{
  position: absolute;
  top: 7.5%;
  left: 50%;
  transform: translateX(-50%);
  width: 350px;
height: 200px;
opacity: 1;
background: #ffffff;
border-radius: 5px;
padding: 8px 10px;
box-sizing: border-box;
}
.larz-z0{
  position: absolute;
  top: 17.3%;
  left: 50%;
  transform: translateX(-50%);
  width: 350px;
  height: 200px;
  opacity: 1;
  background: #ffffff;
  border-radius: 5px;
  padding: 8px 10px;
  box-sizing: border-box;
}
.fdklg{
  font-size: 13px;
  color: #333;
  margin: 2px 0;
  visibility: hidden;
}
.fdjg{
  color: #ff1a17;
}
.rzz-z{
  display: flex;
  justify-content: space-between;
  position: relative;
}
/* .rzz-z div:nth-of-type(1){
  position: absolute;
  top: -43%;
  left: -5%;
  width: 88px;
  height: 38px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  padding-bottom:2px;
  box-sizing: border-box;
  font-size: 15px;
} */
.rzz-o{
  margin-top:20px;
  display: flex;
  justify-content: space-between;
}
.rzz-o img{
  width: 101px;
height: 101px;
border-radius: 5px;
}
.zzo-z{
width: 60%;
}
.puctName{
  width: 90%;
  font-size: 16px;
  font-weight: 500;
  color: #333333;
  line-height: 21px;
  overflow: hidden;
  span-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
} 
.dutiao{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  /* border: 1px solid red; */
}
.bena{
  width: 130px;
height: 12px;
background: #e2dfdf;
border-radius: 6px;
position: relative;
/* border: 1px solid red; */
}
.fasafp{
  font-size: 14px;
  color: #333;
}
.bena-in{
  position: absolute;
  top: 0;
  left: 0;
  height: 12px;
  background: #f4793b;
  border-radius: 6px;
}
.benb{
font-size: 12px;
margin-left: 5px;
font-family: DIN;
color: #f25e04;
}
.ductprice{
  display: flex;
  align-items: center;
  margin-top: 10px;
}
.ductprice div:nth-of-type(1){
font-size: 12px;
font-weight: R;
color: #ff1a17;
line-height: 18px;
}
.ductprice div:nth-of-type(1) span{
  font-size: 15px;
  font-weight: bold;
  }
.ductprice div:nth-of-type(2){
  margin-left: 10px;
font-size: 12px;
font-family: PingFang SC, PingFang SC-Regular;
font-weight: 400;
text-decoration:  line-through;
color: #999999;
line-height: 24px;
}
/*参团成功css*/
.cular-o{
  padding: 15px;
  box-sizing: border-box;
  width: 100%;
background: #ffffff;
border-radius: 5px;
margin-top: 12px;
position: relative;
}
.nomml{
  width: 61px;
height: 61px;
/* margin-left: 50%;
transform: translateX(-50%); */
}
.nomml0{
  width:61px;
height: 61px;
margin-left: 50%;
transform: translateX(-50%);
}
.cmslTitle{
font-size: 16px;
color: #333333;
line-height: 24px;
letter-spacing: 1px;
span-align: center;
margin: 5px 0;
}
.cmslTitle .mut{
  color: #FF3333;
}
.mutte{
font-size: 16px;
color: #3F8AEC;
line-height: 24px;
letter-spacing: 1px;
span-decoration-line: underline;
}
.bianhao{
  margin-left: 50%;
  transform: translateX(-50%);
  width: 100%;
  display: flex;
  /* border: 1px solid red; */
  align-items: center;
}
.fdjkg{
  width: 35%;
  /* flex-shrink: 0; */
  /* border: 1px solid red; */
}
.dsfj{
  width: 65%;
  display: flex;
  flex-wrap: wrap;
  flex-shrink: 0;
  align-items: center;
  /* border: 1px solid red; */
}
.bunt{
  font-size: 12px;
  color: #f25e04;
  line-height: 24px;}
.ularo-o{
  position: relative;
  width: 100%;
  min-height: 175px;
}

.mobust{
float: left;
margin-left: 7px;
margin-top: 7px;
  width: 5px;
  height: 55px;
  border-radius: 50%;
  font-size: 14px;
  font-family: DIN;
  color: #333333;
  display: flex;
  overflow: hidden;
  align-items: flex-end;
  background-repeat: no-repeat;background-size: 100% 100%;
}
.liopu{
  width: 60px;
height: 19px;
opacity: 0.9;
background: #dcdcdc;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
color: #333333;
}
.wenhao{
float: left;
width: 55px;
height: 55px;
border: 1px solid #cccccc;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
color: #cccccc;
border-radius: 50%;
margin-left: 7px;
margin-top: 7px;
}
.clear{
  clear: both;
}
.guize{
font-size: 16px;
color: #999999;
line-height: 18px;
margin-top: 10px;
float: right;
display: flex;
align-items: center;
justify-content: center;
}
.guize img{
  margin-left: 5px;
  width: 14px;
  height: 14px;
}
.crae{
  width: 65px;
height: 25px;
background: #3f8aec;
border-radius: 17px;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
font-size: 16px;
font-weight: normal;
margin-top: 40px;
position: absolute;
top: 0;
right: 15px;
}
.cular-o .crae3{
  background: #3f8aec;
  border-radius: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 16px;
  font-weight: normal;
  margin-top: 10px;
  font-size: 13px;
  padding: 8px 0;
  width: 330px;
  box-sizing: border-box;
  border-radius: 30px;
}
.cular-o .crae2{
  width: 175px;
height: 34px;
background: #fff;
border-radius: 17px;
display: flex;
align-items: center;
justify-content: center;
color: #333;
font-size: 16px;
font-weight: normal;
margin-top: 10px;
border: 1px solid #999999;
margin: 0 auto;
}
.guze{
  width: 100%;
  height: 220px;
}
.mobust2{
  position: absolute;
  top: 7px;
  left: 0;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  font-size: 14px;
  font-family: DIN;
  color: #333333;
  display: flex;
  overflow: hidden;
  align-items: flex-end;
  background-repeat: no-repeat;background-size: 100% 100%;
  transition-property: top,left; transition-duration:1s , 1s;
}
.noaccess {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 7;
  background-color: #999;
  opacity: 0.9;
  top: 0;
  bottom: 0;
  display: block;
  background-img: -webkit-gradient(linear,0 100%,100% 0,color-stop(0.25,rgba(255,255,255,.2)),color-stop(0.25,transparent),color-stop(0.5,transparent),color-stop(0.5,rgba(255,255,255,.2)),color-stop(0.75,rgba(255,255,255,.2)),color-stop(0.75,transparent),to(transparent));
  /* background-img: -webkit-linear-gradient(45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 75%,transparent 75%,transparent); */
  background-img: -moz-linear-gradient(45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 75%,transparent 75%,transparent);
  background-img: -o-linear-gradient(45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 75%,transparent 75%,transparent);
  /* background-img: linear-gradient(45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 75%,transparent 75%,transparent); */
  -webkit-background-size: 16px 16px;
  -moz-background-size: 16px 16px;
  -o-background-size: 16px 16px;
  background-size: 16px 16px;
}
.ommite{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 135px;
height: 37px;
opacity: 1;
background: linear-gradient(0deg,#fcb22f 0%, #faf2b1 100%);
border-radius: 19px;
font-size: 15px;
color: #bd1f06;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
z-index: 8;
}
.prize{
  position: absolute;
  font-size: 15px;
color: #ff9966;
span-align: center;
}
.lpl{
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0.6;
background: #000000;
}
/*阴影css*/
.windowBackgroud {
  position: fixed;
  top: 0;/*  #ifdef  H5  */
  top: calc(88px + constant(safe-area-inset-top));
  top: calc(88px + env(safe-area-inset-top));/*  #endif  */
  left: 0;
  width: 100%;
  height: 100%;
  background: rgb(7, 7, 7, 0.6);
  z-index: 20;
}
/*拼团规则css*/
.commoditydetail {
  position: fixed;
  z-index: 200;
  height: 98%;
  width: 94%;
  bottom: -1200px;
  background: white;
  transition: bottom 0.5s;
  border-radius: 6px 6px 0 0 ;
}

.commoditydetailout {
  bottom: 0;
}
.commod-z{
  position: relative;
  padding: 30px;
  box-sizing: border-box;
  overflow-y: auto;
  height: 100%;
  width: 100%;
}
.commd-title{
  font-size: 17px;
  font-family: PingFang SC, PingFang SC-Medium;
  font-weight: 700;
  span-align: left;
  color: #333333;
  display: flex;
  justify-content: space-around;
  margin-bottom: 15px;
}
.commd-font{
  font-size: 15px;
  font-family: PingFang SC, PingFang SC-Regular;
  color: #666666;
  margin: 3px 0;
}
.bpoisk{
  width: 227px;
  height: 42px;
  border-radius: 11px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #333333;
  font-size: 15px;
  margin: auto;
  margin-top: 20px;
  color: white;
}
.sfjk{
  span-align: center;
}
.dfa{
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}
.asdas{
  display: flex;
  align-items: center;
  justify-content: center;
}
.fkj{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #333;
}
.fuigh{
  color:#3f8aec;
  border-bottom: 1px solid #3f8aec;
}
/* 顶部修改 */
.ksdi{
  display: flex;
  align-items: center;
  /* border: 1px solid red; */
  justify-content: space-around;
  margin: 4px 0 10px 0;
}
.ksdi div{
  width: 33%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* border: 1px solid red; */
}
.ctcgs{
  font-size: 25px;
  color: white;
}
.cmslTitle1{
  font-size: 16px;
  color: #333333;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 1px;
  margin: 5px 0;
}
/* 核销拼中信息 */
.xmain{
  width: 100%;
  margin: 10px auto;
  background: white;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0;
  justify-content: space-around;
}
.xmain div{
  margin: 5px auto;
}
.dskjf{
  font-size: 18px;
  font-weight: 700;
  color: #333333;
}
.kdfjg{
  font-size: 15px;
  color: #333333;
}
.dsjks{
  color: #ff6666;
}
.dsjk{
  width: 90%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
/* .dsjk button{
  padding: 0px 30px;
  font-size: 32px;
  color: #333333;
  border: 2px solid #999999;
  border-radius: 36px;
  line-height: 64px;
} */
/* 核销拼中信息带核销码 */
.dkga{
  color: #009900;
}
.kdsjg{
  width: 120px;
  height: 120px;
  border-radius: 5px;
}
.kdsjg img{
  width: 100%;
  height: 100%;
}
.fdka{
  font-size: 14px;
  color: #999999;
}
.sdfsd img{
  opacity: 0.4;
}
.ksdfjg button[size='mini']{
  border: none;
  padding: 0;
  color: #333333;
  font-size: 16px;
  line-height: 1;
}
.dsfm{
  color: red;
  font-size: 21px;
}
.dfkjg{
  color: #666;
  font-size: 14px;
}

/* 遮罩层 */
.zhezhao{
  position: fixed;
  top: 0;/*  #ifdef  H5  */
  top: calc(88px + constant(safe-area-inset-top));
  top: calc(88px + env(safe-area-inset-top));/*  #endif  */
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  background: #00000050;
}
/* 拼团信息提示 */
.gxtk{
  position: fixed;
  top: 25%;
  left:7%;
  z-index: 200;
  background: white;
  width: 86%;
  border-radius: 8px;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 15px 10px 5px 10px;
  box-sizing: border-box;
}
.anniu1{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  color: white;
}
.gxtk .anniu2{
  margin: 25px 0 5px 0;
}
.anniu1 div{
  width: 45%;
  height: 30px;
  line-height: 30px;
  span-align: center;
  border-radius: 5px;
}
.xqiao{
  position: absolute;
  bottom: -50px;
  left: 45%;
  width: 30px;
  height: 30px;
}
.kjsd{
  background: rgb(156, 151, 151);
}
.kdjm{
  background: #428ceb;
}
.dklg{
  margin: 25px 0;
  padding: 10px 15px;
}
.askjdf{
  color: #333;
  font-size: 15px;
}
.kdfjga{
  height: 34px;
  padding: 0 15px;
  color: #333;
  border: 1px solid #999;
  border-radius: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

/* 提示弹框改 */
.sqtk{
  width: 86%;
  background: white;
  border-radius: 4px;
  position: fixed;
  left: 7%;
  top: 28%;
  z-index: 200;
  display: flex;
  align-items: center;
  flex-direction: column;  
}
.kjdfg{
  font-weight: 600;
  font-size: 19px;
  margin: 25px auto;
}
.dskls{
  width: 70%;
  height: 50px;
  line-height: 30px;
  span-align: center;
  color: #333;
  margin: 50px 0 25px 0;
}
.dskls1{
  width: 70%;
  color: #333;
  height: 50px;
  line-height: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 50px 0 25px 0;
}
.dfja{
  width: 100%;
  display: flex;
  align-items: center;
  margin-top: 25px;
  color: #222;
  border-top: 1px solid gainsboro;
}
.dfja div{
  width: 49%;
  height: 45px;
  line-height: 45px;
  span-align: center;
}
.dkfjg{
  border-left: 1px solid gainsboro;
}

/* 开团仪式弹框 */
.ksda{
  position: fixed;
  left: 0;
  top: 0;/*  #ifdef  H5  */
  top: calc(44px + constant(safe-area-inset-top));
  top: calc(44px + env(safe-area-inset-top));/*  #endif  */
  width: 100%;
  background: white;
  z-index: 200;
  height:80%;
  overflow-y: auto;
}
.djsk{
  opacity: 1;
  background: #428ceb;
  color: white;
}
.dfk{
  color: red;
}
.kdj{
  font-size: 14px;
}
.dfkjgd{
  display: flex;
  align-items: center;
  flex-direction: column;
  font-size: 14px;
  color: #333;
}
.kdsj{
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-top: 4px;
}
.dskl{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  background: gainsboro;
  /* border: 1px solid red; */
}
.dsfp{
  position: absolute;
}
.dskl img{
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.asld{
  width: 70%;
  position: absolute;
  bottom: 0;
  background: gainsboro;
  left: 5px;
  font-size: 10px;
  span-align: center;
}
.sdfj{
  position: fixed;
  bottom: 0;
  left: 45%;
}
.dskl0{
  position: absolute;
  animation: one0 10s 1;
}
@keyframes one0{
  0%{
    top: 20%;
    left: 89%;
  }
  10%{
    top: 45%;
    left: 12%;
  }
  20%{
    top: 2%;
    left: 75%;
  }
  30%{
    top: 24%;
    left: 46%;
  }
  40%{
    top: 3%;
    left: 46%;
  }
  50%{
    top: 24%;
    left: 58%;
  }
  60%{
    top: 67%;
    left: 24%;
  }
  70%{
    top: 6%;
    left: 25%;
  }
  80%{
    top: 23%;
    left: 47%;
  }
  90%{
    top: 24%;
    left: 46%;
  }
  100%{
    top: 50%;
    left: 50%;
  }
}
@keyframes one1{
  0%{
    top: 10%;
    left: 69%;
  }
  10%{
    top: 25%;
    left: 32%;
  }
  20%{
    top: 10%;
    left: 55%;
  }
  30%{
    top: 14%;
    left: 36%;
  }
  40%{
    top: 30%;
    left: 6%;
  }
  50%{
    top: 4%;
    left: 80%;
  }
  60%{
    top: 50%;
    left: 2%;
  }
  70%{
    top: 60%;
    left: 15%;
  }
  80%{
    top: 33%;
    left: 27%;
  }
  90%{
    top: 64%;
    left: 26%;
  }
  100%{
    top: 30%;
    left: 50%;
  }
}
@keyframes one2{
  0%{
    top: 3%;
    left: 70%;
  }
  10%{
    top: 5%;
    left: 52%;
  }
  20%{
    top: 80%;
    left: 75%;
  }
  30%{
    top: 54%;
    left: 36%;
  }
  40%{
    top: 77%;
    left: 34%;
  }
  50%{
    top: 45%;
    left: 68%;
  }
  60%{
    top: 27%;
    left: 29%;
  }
  70%{
    top: 16%;
    left: 15%;
  }
  80%{
    top: 13%;
    left: 57%;
  }
  90%{
    top: 24%;
    left: 46%;
  }
  100%{
    top: 50%;
    left: 80%;
  }
}
@keyframes one3{
  0%{
    top: 40%;
    left: 39%;
  }
  10%{
    top: 63%;
    left: 62%;
  }
  20%{
    top: 27%;
    left: 25%;
  }
  30%{
    top: 76%;
    left: 46%;
  }
  40%{
    top: 36%;
    left: 36%;
  }
  50%{
    top: 2%;
    left: 8%;
  }
  60%{
    top: 89%;
    left: 90%;
  }
  70%{
    top: 53%;
    left: 25%;
  }
  80%{
    top: 3%;
    left: 42%;
  }
  90%{
    top: 55%;
    left: 4%;
  }
  100%{
    top: 37%;
    left: 66%;
  }
}

@keyframes one4{
  0%{
    top: 40%;
    left: 29%;
  }
  10%{
    top: 33%;
    left: 62%;
  }
  20%{
    top: 27%;
    left: 45%;
  }
  30%{
    top: 76%;
    left: 36%;
  }
  40%{
    top: 36%;
    left: 6%;
  }
  50%{
    top: 23%;
    left: 86%;
  }
  60%{
    top: 8%;
    left: 90%;
  }
  70%{
    top: 53%;
    left: 5%;
  }
  80%{
    top: 38%;
    left: 5%;
  }
  90%{
    top: 55%;
    left: 34%;
  }
  100%{
    top: 45%;
    left: 88%;
  }
}
@keyframes one5{
  0%{
    top: 10%;
    left: 39%;
  }
  10%{
    top: 63%;
    left: 32%;
  }
  20%{
    top: 27%;
    left: 15%;
  }
  30%{
    top: 26%;
    left: 56%;
  }
  40%{
    top: 16%;
    left: 36%;
  }
  50%{
    top: 2%;
    left: 28%;
  }
  60%{
    top: 59%;
    left: 37%;
  }
  70%{
    top: 23%;
    left: 25%;
  }
  80%{
    top: 3%;
    left: 12%;
  }
  90%{
    top: 35%;
    left: 24%;
  }
  100%{
    top: 17%;
    left: 66%;
  }
}
@keyframes one6{
  0%{
    top: 90%;
    left: 29%;
  }
  10%{
    top: 63%;
    left: 12%;
  }
  20%{
    top: 54%;
    left: 66%;
  }
  30%{
    top: 57%;
    left: 87%;
  }
  40%{
    top: 66%;
    left: 55%;
  }
  50%{
    top: 27%;
    left: 85%;
  }
  60%{
    top: 49%;
    left: 19%;
  }
  70%{
    top: 13%;
    left: 5%;
  }
  80%{
    top: 93%;
    left: 33%;
  }
  90%{
    top: 25%;
    left: 14%;
  }
  100%{
    top: 27%;
    left: 4%;
  }
}
@keyframes one7{
  0%{
    top: 7%;
    left: 9%;
  }
  10%{
    top: 55%;
    left: 46%;
  }
  20%{
    top: 27%;
    left: 3%;
  }
  30%{
    top: 76%;
    left: 43%;
  }
  40%{
    top: 21%;
    left: 29%;
  }
  50%{
    top: 3%;
    left: 8%;
  }
  60%{
    top: 79%;
    left: 95%;
  }
  70%{
    top: 653%;
    left: 40%;
  }
  80%{
    top: 13%;
    left: 12%;
  }
  90%{
    top: 15%;
    left: 74%;
  }
  100%{
    top: 37%;
    left: 54%;
  }
}
@keyframes one8{
  0%{
    top: 41%;
    left: 23%;
  }
  10%{
    top: 56%;
    left: 62%;
  }
  20%{
    top: 37%;
    left: 35%;
  }
  30%{
    top: 6%;
    left: 4%;
  }
  40%{
    top: 6%;
    left: 36%;
  }
  50%{
    top: 20%;
    left: 80%;
  }
  60%{
    top: 59%;
    left: 60%;
  }
  70%{
    top: 90%;
    left: 85%;
  }
  80%{
    top: 73%;
    left: 66%;
  }
  90%{
    top: 5%;
    left: 84%;
  }
  100%{
    top: 67%;
    left: 43%;
  }
}
.vasd{
  position: fixed;
  top: 0;/*  #ifdef  H5  */
  top: calc(44px + constant(safe-area-inset-top));
  top: calc(44px + env(safe-area-inset-top));/*  #endif  */
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 100;
}
.asfav{
  position: fixed;
  width: 30px;
  height: 30px;
  left: 45%;
  bottom: 10%;
}
.sdgds{
  width: 40px;
  height: 40px;
}

/* 分享提示弹框遮罩 */
.zhezhza{
  position: fixed;
  top: 0;/*  #ifdef  H5  */
  top: calc(44px + constant(safe-area-inset-top));
  top: calc(44px + env(safe-area-inset-top));/*  #endif  */
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.5);
}
/* 分享提示弹框 */
.djks{
  position: fixed;
  width: 86%;
  left: 7%;
  top: 30%;
  background: white;
  border-radius: 6px;
  z-index: 200;
  box-sizing: border-box;
  padding: 25px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.dslk{
  font-weight: 700;
  font-size: 21px;
  color: #000;
}
.sdfks{
  color: #333;
  margin: 25px 0;
  font-size: 17px;
  span-align: center;
  line-height: 30px;
}
.ksjd{
  width: 50%;
  height: 40px;
  line-height: 40px;
  background: #3f8aec;
  color: white;
}

/* 返回顶部按钮 */
.totop{
  position: fixed;
  right: 10px;
  top: 65%;
  width: 27px;
  height: 27px;
}

/* 新增核销限制 */
.dhxk{
  width: 80%;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
}
.asdap{
  width: 30%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #f4793b;
  color: #f4793b;
  border-radius: 4px 0 0 4px;
}
.sdgfvv{
  width: 70%;
  height: 47px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  background: #f4793b;
  color: white;
  border-radius: 0 4px 4px 0;
}
.asdavv{
  font-size: 12px;
}
.dfgdsa{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2px;
}
.aksdoo{
  width:33%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.alksdgs{
  display: flex;
  align-items: center;
}
.asfsd{
  width: 10px;
  height: 10px;
  margin-left: 3px;
}
.aksdoo .mint-switch{
  zoom: 0.5;
}
/* 替换分享 */
.yqsa{
  margin-top: 5px;
}
.yqsa button{
  line-height: normal;
  font-size: 14px;
  padding: 0;
  background: none;
  display: flex;
  align-items: center;
}
.deyq{
  margin-right: 3px;
  font-size: 16px;
}
.fximg{
  width: 17px;
  height: 17px;
}
.asdsga{
  height: 34px;
  padding: 0 15px;
  color: #333;
  border: 1px solid #999;
  border-radius: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
</style>